<template>
	<view class="container bg ">
		<view class="topbox plr-20">
			<u-icon name="arrow-left" color="#000" size="36" @click="backfn"></u-icon>
			<view class="searchbox pt-30">
				<u-search placeholder="请输入数字藏品、盲盒名称" v-model="searchStr" placeholder-color="#999" color="#000"
					shape="square" bg-color="#fff" border-color="#F5F5F5" :show-action=true @search="toSearch"
					@custom="custom" @clear="clear">
				</u-search>
			</view>

		</view>
		<view  class="flex flex-start arrbox " style="background-color: #808080;height: 40px;">
			<view class="ml-40" :class="item.active==true?'itembox':'itembox1'" @click="clickfn(item)"
				v-for="item in Collections">{{item.val}}</view>
		</view>

		<view class="allcollect ">
			<!-- 		<empty v-if="collectList.length == 0"></empty> -->
			<view class="min100 pb-100 bg ">
				<view class="" v-if="isshow==0">
					<view class="">
						<u-dropdown @open="opennum" active-color="#000">
							<u-dropdown-item v-model="name" height='400rpx' @change="categorynum" :title=this.idd
								:options="options1num">
							</u-dropdown-item>
							<u-dropdown-item v-model="value2" @change="categorynumnew" :title=this.idprice
								:options="options2">
							</u-dropdown-item>
						</u-dropdown>
					</view>
					<view class="blind_cont flex ">
						<view class="blind_item mt-30" v-for="item in collection_list">
							<view class="blind_item_img" @click="goDetails(item)">
								<image :src="item.image" class="circulation" mode="widthFix"></image>
								<view class="item_circulation size-20">流通：{{item.surplus}}份</view>
							</view>
							<view class="item_detail plr-20">
								<view class="detail_tit size-30 mt-10">
									{{item.name}}
								</view>
								<view class="limit flex size-26 mtb-20">
									<view class=" plr-10">限量</view>
									<view class="limitnum">{{item.stock}}份</view>
								</view>
							</view>
							<view class="pricebox plr-20 ptb-20">
								￥{{item.price}}起
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="isshow==1">
					<view class="flex1">
						<u-dropdown @open="open" active-color="#000">
							<u-dropdown-item v-model="name" @change="category" :title=this.idboxall :options="options1">
							</u-dropdown-item>
							<u-dropdown-item v-model="value3" @change="categorynew" :title=this.idbox
								:options="options3">
							</u-dropdown-item>
						</u-dropdown>
					</view>
					<view class="blind_content plr-30">
						<view class="blind_item mt-30" v-for="item in blind_list">
							<view class="blind_item_img" @click="blind_detail(item)">
								<image :src="item.image" mode="widthFix"></image>
							</view>
							<view class="item_detail plr-20">
								<view class="detail_tit size-30 mt-10">
									{{item.name}}
								</view>
							</view>
							<view class="pricebox plr-20">
								￥{{item.price}}
							</view>
						</view>
					</view>
				</view>


			</view>
			<!-- 		<view style="" v-else v-for="(item, index) in collectList" :key="index" @click="goDetails(item.id)"
				class="collectitem">
				<view class="collectItem mb-30 size-22">
					<image class="collectImg" :src="item.image" mode="widthFix"></image>
					<view v-if="item.status == 1" class="itemTips status1 plr-8 ptb-8">
						{{ item.status_text }}
					</view>
					<view class="itemTips2 plr-8 ptb-8" v-if="item.status == 2">
						<image src="../../static/sell-out.png" mode="widthFix" class="sellout"></image>
					</view>
					<view class="flex flex-start itemTips plr-8 ptb-8" v-if="item.status == 3"
						style="color: #9fc58c; background: #161912">
						<view class="">
							{{ item.status_text }}
						</view>
					</view>
					<view class="itemTips plr-8 ptb-8 flex center" v-if="item.status == 4"
						style="background: linear-gradient(to right, #cf58e5, #fc76d5)">
						<view class="">
							{{ item.status_text }}
						</view>
						<u-count-down :timestamp="item.diff_time" bg-color="background:transparent" color="#fff"
							font-size="24" separator-color="#fff" style="margin-left: 5rpx"></u-count-down>
					</view>
					<view class="plr-30 ptb-30">
						<view class="flex flex-start">
							<view class="size-34 gray workname">
								{{ item.name }}
							</view>
						</view>
						<view class="mtb-20 flex flex-start">
							<view class="tipsLeft mr-20 plr-10 ptb-7 radius-6" style="color: #fff">
								{{ item.goods_category_name }}
							</view>
							<view class="flex flex-start mr-20">
								<view class="tipsLeft plr-10 ptb-7 radius-6" style="color: #fff"> 限量 </view>
								<view class="tipsRight red ptb-7 plr-5" style="border-radius: 0 6rpx 6rpx 0">
									{{ item.stock }}
								</view>
							</view>
						</view>
						<view class="flex flex-between" style="margin: 10rpx 0;">
							<view class="flex flex-start">
								<image :src="item.author_image" class="userImg"></image>
								<view class="size-24 gray ml-24 author">
									{{ item.author_name }}
								</view>
							</view>
						</view>
						<view class=" size-30" style="color: #fff;"> ￥{{ item.price }} </view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				idboxall: '全部藏品',
				idbox: '最新上架',
				idprice: '最新上架',
				idd: '全部藏品',
				titlename: '',
				id: '',
				value: '',
				name: '',
				activetab: '',
				allnew: [],
				all: [{
						id: 0,
						name: '我的关注',
						active: false
					},
					{
						id: 1,
						name: '推荐',
						active: false
					},
					{
						id: '',
						name: '全部',
						active: true
					},
				],
				item: "",
				index: '',
				value1: 1,
				value2: 1,
				value3: 1,
				// 盲盒-全部盲盒列表
				options1: [],
				// 数字藏品-全部盲盒列表
				options1num: [],
				options2: [{
						label: '最新上架',
						value: 1,
					},
					{
						label: '价格升序',
						value: 2,
					},
					{
						label: '价格降序',
						value: 3,
					},
				],
				options3: [{
						label: '最新上架',
						value: 1,
					},
					{
						label: '价格升序',
						value: 2,
					},
					{
						label: '价格降序',
						value: 3,
					},
				],
				isshow: 0,
				collection_list: [

				],
				// 寄售-盲盒列表
				blind_list: [],
				Collections: [{
						index: 0,
						val: '数字藏品',
						active: true
					},
					{
						index: 1,
						val: '盲盒',
						active: false
					}
				],
				follow: [

				],
				query: {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: "",
					goods_category_id: this.index
				},
				flag: false, //上拉加载
				status: 'more',
				list: [],
				collectListnew: [],
				searchStr: '',
				page: 1,
				collectList: [], //列表数据包
				flag: false, //上拉加载
				status: 'more',
			}
		},
		onShow() {
			this.init();
		this.blindBoxnumber() //数字藏品列表
			this.blindBoxbox() //盲盒列表
			this.idd = '全部藏品'
			this.name = ''
			this.idboxall = '全部藏品'


		},
		onHide() {
			this.list = [];
			this.flag = false;
			this.status = 'more';
			this.query = {
				time_order: '',
				price_order: '',
				page: 1,
				pagesize: 10,
				search: ""
			}
		},
		onReachBottom() {
			if (!this.flag) {
				this.status = "loading";
				this.query.page++;
				this.init();
			}
		},
		onPullDownRefresh() {
			this.flag = false;
			this.query.page = 1;
			this.list = [];
			this.init();
		},
		methods: {
			// 寄售-数字藏品-全部藏品分类
			opennum(index) {
				// console.log(index);
				this.index = index
				if (this.index == 0) {
					this.$http('api/trade/tradeGoodsListGroupV1', {

					}).then(res => {
						console.log(res.data);
						let optionsboxnum = []
						this.options1 = res.data
						res.data.forEach((item) => {
							// console.log(item.name);
							optionsboxnum.push({
								id: item.id,
								label: item.name,
								value: item.id
							})
						})
						this.options1num = optionsboxnum
						// this.options1num.unshift({
						// 	id: 0,
						// 	label: '全部藏品',
						// 	value: '',

						// })
						// console.log(this.options1num);
					})
				} else if (this.index == 1) {

				}
			},
			// 寄售-盲盒-全部盲盒分类
			open(index) {
				console.log(index);
				this.index = index
				if (this.index == 0) {
					this.$http('api/trade/tradeBoxListGroup', {}).then(res => {
						// console.log(res.data);
						let optionsbox = []
						// this.options1 = res.data
						res.data.forEach((item) => {
							// console.log(item.name);
							optionsbox.push({
								id: item.box_id,
								label: item.name,
								value: item.box_id
							})
						})
						this.options1 = optionsbox
						// this.options1.unshift({
						// 	label: '全部盲盒',
						// 	value: ''
						// })
					})
				} else if (this.index == 1) {

				}
			},
			// 数字藏品
			blindBoxnumber() {
				this.$http('api/trade/tradeGoodsListGroup', {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: "",
					goods_id: this.index
				}).then(res => {
					console.log(res.data);
					this.collection_list = res.data
				})
			},
			// 盲盒
			blindBoxbox() {
				this.$http('api/trade/tradeBoxList', {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: "",
				}).then(res => {
					console.log(res.data);
					this.blind_list = res.data
				})
			},

			// 寄售-盲盒-全部盲盒点击-列表更新
			category(value) {
				console.log(value);
				this.id = value
				this.$http('api/trade/tradeBoxList', {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: "",
					box_id: this.id,
				}).then(res => {
					console.log(res.data);
					this.blind_list = res.data
					this.blind_list.forEach((item) => {
						if (this.id == 0) {
							this.idboxall = '全部藏品'
						} else {
							this.idboxall = item.name
						}
						console.log(item);


					})
				})
			},
			// 寄售-数字藏品-全部藏品点击-列表更新
			categorynum(value) {
				console.log(this.options1num);
				console.log(value)
				this.id = value
				this.$http('api/trade/tradeGoodsListGroup', {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: "",
					goods_id: this.id,
				}).then(res => {
					console.log(res.data);
					this.collection_list = res.data
					this.collection_list.forEach((item) => {
						if (this.id == 0) {
							this.idd = '全部藏品'
						} else {
							this.idd = item.name
						}
						console.log(item);


					})

				})
			},
			// 	// 寄售-盲盒-最新上架点击-列表更新
			categorynew(value) {
				console.log(value);
				this.idbox = value
				console.log(this.idbox)
				if (this.idbox == 1) {
					this.idbox = '最新上架'
					this.$http('api/trade/tradeBoxList', {
						time_order: 1,
						price_order: '',
						page: 1,
						pagesize: 10,
						search: "",
					}).then(res => {
						console.log(res.data);
						this.blind_list = res.data
					})
				} else if (this.idbox == 2) {
					this.idbox = '价格升序'
					this.$http('api/trade/tradeBoxList', {
						time_order: '',
						price_order: 1,
						page: 1,
						pagesize: 10,
						search: "",
					}).then(res => {
						console.log(res.data);
						this.blind_list = res.data
					})
				} else if (this.idbox == 3) {
					this.idbox = '价格降序'
					this.$http('api/trade/tradeBoxList', {
						time_order: '',
						price_order: 2,
						page: 1,
						pagesize: 10,
						search: "",
					}).then(res => {
						console.log(res.data);
						this.blind_list = res.data
					})
				}
			},
			// 	// 寄售-数字藏品-最新上架点击-列表更新
			categorynumnew(value, ) {
				console.log(value);
				this.idprice = value
				console.log(this.id);
				if (this.idprice == 1) {
					this.idprice = '最新上架'
					console.log(this.idprice);
					this.$http('api/trade/tradeGoodsListGroup', {
						time_order: 1,
						price_order: '',
						page: 1,
						pagesize: 10,
						search: "",
						goods_id: ''
					}).then(res => {
						console.log(res.data);
						this.collection_list = res.data
					})
				} else if (this.idprice == 2) {
					this.idprice = '价格升序'
					this.$http('api/trade/tradeGoodsListGroup', {
						time_order: '',
						price_order: 1,
						page: 1,
						pagesize: 10,
						search: "",
						goods_id: ''
					}).then(res => {
						console.log(res.data);
						this.collection_list = res.data
					})
				} else if (this.idprice == 3) {
					this.idprice = '价格降序'
					this.$http('api/trade/tradeGoodsListGroup', {
						time_order: '',
						price_order: 2,
						page: 1,
						pagesize: 10,
						search: "",
						goods_id: ''
					}).then(res => {
						console.log(res.data);
						this.collection_list = res.data
					})
				}
			},
			toclassificate() {
				uni.navigateTo({
					url: 'pages/blindBox/classificate?id=' + item.id

				})
			},
			clickfn(item) {
				if (item.index == 0) {
					this.blindBoxnumber()
				} else if (item.index == 1) {
					this.blindBoxbox()
				}
				for (let i = 0; i < this.Collections.length; i++) {
					this.Collections[i].active = false
				}
				item.active = true
				this.isshow = item.index
				// console.log(this.isshow)
				// console.log(item.index)
			},
			followfn(item) {
				// console.log(item);
				this.index = item.id
				// console.log(this.index);
				for (let i = 0; i < this.allnew.length; i++) {
					this.allnew[i].active = false
				}
				item.active = true
				this.activetab = item.active
				// console.log(this.activetab);
				this.init()
			},



			init() {
				this.blindBoxnumber()
			},
			toSearch() {
				this.query.page = 1;
				this.list = [];
				this.init();
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/blindBox/search'
				})
			},
			// 拼接url
			// 寄售-藏品-详情页-
			goDetails(item) {
				uni.navigateTo({
					url: './boxDetails?id=' + item.id + '&author_name=' + item.author_name + '&author_image=' +
						item.author_image + '&image=' + item.image
				})
			},
			blind_detail(item) {
				uni.navigateTo({
					url: '/pages/blindBox/blindboxDetail?users_box_id=' + item.users_box_id
				})
			},
			//清除控件触发的事件 
			clear() {
				this.$http('api/trade/tradeGoodsListGroup', {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: this.searchStr,
					goods_id: ''
				}).then(res => {
					console.log(res);
					this.collectList = res.data
				})
			},
			// 右边搜索控件触发事件
			custom() {
				this.toSearch()
			},
			backfn() {
				uni.navigateBack({})
			},
			goDetails(id) {
				uni.navigateTo({
					url: './homeDetails?id=' + id
				});
			},
			toSearch() {
				this.searchStr = this.searchStr.trim()
				console.log(this.searchStr);
				if (this.searchStr == '') {
					this.collectList = []
					uni.showToast({
						title: "请输入藏品名称",
						icon: 'none'
					})
					return;
				} else {
					this.page = 1;
					this.collectList = [];
					this.$http('api/trade/tradeGoodsListGroup', {
						time_order: '',
						price_order: '',
						page: 1,
						pagesize: 10,
						search: this.searchStr,
						goods_id: ''
					}).then(res => {
						console.log(res);
						this.collectList = res.data
						this.collectListarr = JSON.parse(JSON.stringify(this.collectList))
						if (this.collectListarr == '') {
							uni.showToast({
								title: '无搜索商品',
								icon: 'error'
							})
						}

					})
					// this.$http('api/goods/goodsListSearch', { name: this.searchStr }).then(res => {
					//   uni.stopPullDownRefresh();
					//   let data = res.data;
					//   if (data.length == 0) {
					//     this.flag = true;
					//     this.status = 'noMore';
					//   } else {
					//     this.collectList = this.collectList.concat(data);
					//     if (data.length < 10) {
					//       this.flag = true;
					//       this.status = 'noMore';
					//     }
					//   }
					// });
				}

			},
			init() {
				this.$http('api/goods/goodsList', {
					page: this.page,
					pagesize: 10,
					search: this.searchStr
				}).then(res => {
					uni.stopPullDownRefresh();
					let data = res.data;
					if (data.length == 0) {
						this.flag = true;
						this.status = 'noMore';
					} else {
						this.collectList = this.collectList.concat(data);
						if (data.length < 10) {
							this.flag = true;
							this.status = 'noMore';
						}
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #F5F5F5;
	}

	.blind_content {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.blind_item {
			width: 48%;
			height: 460rpx;
			border-radius: 20rpx;
			background-color: #fff;
			position: relative;

			.pricebox {
				position: absolute;
				bottom: 20rpx;
				right: 0;
				font-weight: 600;
			}

			.blind_item_img {
				position: relative;

				image {
					width: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}

				.circulation {
					width: 90%;
					position: absolute;
					bottom: 5rpx;
					left: 5%;
					z-index: 999;
				}

				.item_circulation {
					position: absolute;
					bottom: 10rpx;
					z-index: 10000;
					left: 28%;
				}
			}

			.item_detail {
				background: url(../../static/blindbox/ru1.png) no-repeat center 0rpx;
				background-position: center 0px;
				background-size: cover;

				.detail_tit {
					font-weight: 600;
				}

				.limit {
					width: 51%;
					background-color: rgb(254, 204, 173);
					justify-content: space-between;
					border-radius: 20rpx;

					.limitnum {
						background-color: rgb(253, 243, 234);
					}
				}
			}
		}
	}

	.topbox {

		padding: 20rpx;
		background-color: gray;

		.arrbox {
			margin-top: 40rpx;
			color: #fff;

			.itembox,
			.itembox1 {
				margin-right: 20rpx;
				color: #999;
			}

			.itembox {
				color: #fff;
				font-weight: 800;
			}
		}
	}

	.classification {
		width: 100%;
		color: #333;
		background-color: #fff;

		.blind_setting {
			width: 40rpx;
		}

		.classcont {
			display: flex;
			overflow: auto;

			.classitem,
			.classitem1 {
				flex-grow: 0;
				flex-shrink: 0;
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 10rpx;
			}

			.classitem {
				font-weight: 600;
				border-bottom: 10rpx solid #fda889;
			}
		}

		image {
			width: 80rpx;
		}

	}

	.blind_cont {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.blind_item {
			width: 48%;
			height: 480rpx;
			border-radius: 20rpx;
			background-color: #fff;
			position: relative;
			z-index: 1;

			.pricebox {
				position: absolute;
				bottom: 0;
				right: 0;
				font-weight: 600;
			}

			.blind_item_img {
				position: relative;

				image {
					width: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}

				.circulation {
					width: 90%;
					// position: absolute;
					bottom: 5rpx;
					left: 5%;
					z-index: 999;
				}

				.item_circulation {
					position: absolute;
					bottom: 10rpx;
					z-index: 10000;
					left: 22%;
					background-color: yellow;
					width: 200rpx;
					border-radius: 16rpx 16rpx 0 0;
					text-align: center;
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}

			.item_detail {
				// height: 200rpx;
				background: url(../../static/blindbox/ru1.png) no-repeat center 0rpx;
				background-position: center 0px;
				background-size: cover;

				.detail_tit {
					font-weight: 600;
				}

				.limit {
					width: 51%;
					background-color: rgb(254, 204, 173);
					justify-content: space-between;
					border-radius: 20rpx;
					font-size: ;

					.limitnum {
						background-color: rgb(253, 243, 234);
					}
				}
			}
		}
	}

	::v-deep  .u-action {
		color: #333 !important;
	}

	.homeImg {
		width: 284rpx;
		height: 60rpx;
	}


	.collectImg {
		width: 100%;
		height: 690rpx;
	}

	.homeIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.tipsLeft {
		background: #44ACFF;
		color: #2f2f2e;
	}

	.tipsRight {
		background: rgba(239, 170, 28, .3);
	}

	.userImg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: #666;
	}

	::v-deep  .u-action-active {
		color: #fff;
	}

	.itemTips {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		background: #5C5FEF;
		border-radius: 20rpx;
		color: #fff;
		font-size: 22rpx;
		z-index: 100;
	}

	.topbox {

		display: flex;
		align-items: center;

		.searchbox {
			width: 90%;
			margin: 0rpx auto 20rpx;
		}
	}

	.collectImg {
		width: 100%;
		height: 690rpx;
	}

	.userImg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.container {
		width: 100%;
		min-height: 100vh;
		// margin-top: -20rpx;
	}

	.history {
		.historytit {
			font-size: 33rpx;
			font-weight: 600;
		}

		.historycont {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.historyitem {
				padding: 5rpx 10rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
				background-color: #666;
			}
		}
	}

	.allcollect {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.collectitem {
			background-color: #000;
			margin-top: 20rpx;
			position: relative;
			width: 48%;

			.collectItem {
				.itemTips {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					// border-radius: 50%;
					color: #fff;
					// font-size: 22rpx;
					z-index: 100;
				}

				.itemTips2 {
					width: 110rpx;
					height: 110rpx;
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					// border-radius: 50%;
					color: #fff;
					// font-size: 22rpx;
					z-index: 100;

					.sellout {
						width: 120%;
					}
				}

				.status1 {
					background: linear-gradient(to right, rgb(68, 172, 255), rgb(68, 172, 255));
					border-radius: 20rpx;
				}
			}

		}

		.workname {
			color: #fff;
		}

		.author {
			color: #fff;
		}
	}
</style>
